import {Image, StyleSheet, View, Text, TouchableOpacity, ScrollView, RefreshControl} from 'react-native';
import {Stack, useRouter} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import {useCallback, useEffect, useState} from "react";
import CountDownTimer from "@/components/CountDownTimer/index";
import * as Clipboard from 'expo-clipboard';

import clockIcon from "@/assets/images/order/clock_icon.png"
import CopyIcon from "@/assets/images/order/copy_icon.png"
import SuccessClockIcon from "@/assets/images/order/succes_clock.png"
import cancelHeaderIcon from "@/assets/images/order/cancel_Header_Icon.png"
import {useSelector} from "react-redux";
import {RootState} from "@/store";
import { cancelOrderByRequest } from "@/services/orederServices"
import {showToast} from "@/utils/rootToast";

/* type
*  0 待支付
*  1 已支付
*  2 已取消
*  3 已付款
 */

enum refundEnum {
    success = 0,
    err,
    apply
};


export default function orderDetailScreen() {

    const router = useRouter();
    const [refreshing, setRefreshing] = useState(false);
    const [type, setType] = useState(0);
    const [refundType, setRefundType] = useState(2);

    const activityStore = useSelector((state: RootState) => state.activityDetail);
    const { orderDetailByItem } = activityStore;

    useEffect(() => {
        console.log('activityStore', activityStore);
    }, []);

    const onRefresh = useCallback(() => {
        setRefreshing(true);
        // 模拟网络请求
        setTimeout(() => {
            setRefreshing(false);
        }, 1000);
    }, []);

    const WaitPayComponent = function () {
        return (
            <View style={styles.waitPayHeader}>
                <View style={styles.waitPayHeaderIcon}>
                    <Image source={clockIcon} style={{ width: "100%", height: "100%" }} />
                </View>
                <Text style={styles.waitPaytitle}>等待支付</Text>
            </View>
        )
    };

    const PaidHeaderTitle = function () {
        return (
            <View style={styles.waitPayHeader}>
                <View style={styles.waitPayHeaderIcon}>
                    <Image source={SuccessClockIcon} style={{ width: "100%", height: "100%" }} />
                </View>
                <Text style={styles.paidTitle}>已支付</Text>
            </View>
        )
    };

    const CancelHeaderTitle = function () {
        return (
            <View style={styles.waitPayHeader}>
                <View style={styles.waitPayHeaderIcon}>
                    <Image source={cancelHeaderIcon} style={{ width: "100%", height: "100%" }} />
                </View>
                <Text style={styles.paidTitle}>已取消</Text>
            </View>
        )
    };

    const RefundHeaderTitle = function () {
        return (
            <View style={styles.waitPayHeader}>
                <Text style={styles.paidTitle}>退款详细</Text>
            </View>
        )
    };

    const copyToClipboard = () => {
        Clipboard.setStringAsync(orderDetailByItem?.orderNum);
    };

    const goRefundOrder = function () {
        router.push("/order/refundOrder")
    };

    const cancelOrderByNum = function (orderNum) {
        const data = {
            orderNum,
        };
        cancelOrderByRequest(data)
            .then(res => {
                console.log('res', res)
                showToast("取消订单成功")
            })
            .catch(err => {
                console.log('err', err);
            })
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#F7F7F7" }}>
            <Stack.Screen
                options={{
                    headerTitle: () => {
                        if (orderDetailByItem.payStatus == 0) {
                            return <WaitPayComponent/>
                        };
                        if (orderDetailByItem.payStatus == 1) {
                            return  <PaidHeaderTitle/>
                        };

                        if (orderDetailByItem.payStatus == 2) {
                            return  <CancelHeaderTitle/>
                        };

                        if (orderDetailByItem.payStatus == 4) {
                            return  <RefundHeaderTitle/>
                        };

                    },
                    headerStyle: {
                        backgroundColor: '#F7F7F7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <ScrollView
                refreshControl={
                    <RefreshControl
                        colors={['#CCC']} // 设置下拉刷新控件的颜色
                        progressBackgroundColor="#ffffff" // 设置进度条的背景颜色
                        refreshing={refreshing}
                        onRefresh={onRefresh}
                    />
                }
            >
                <View>
                    {
                        activityStore.payStatus == 0 && (
                            <>
                                <View style={styles.waitPayTime}>
                                    <Text style={{ flexDirection: "row", alignItems: "center" }}>
                                        需支付: ¥{ orderDetailByItem?.price } 剩余
                                        <CountDownTimer createTime={orderDetailByItem?.orderValidSecond} countdownMinutes={15} />
                                        自动取消
                                    </Text>
                                </View>
                                <TouchableOpacity>
                                    <View style={styles.goPay}>
                                        <Text style={styles.goPayText}>去支付</Text>
                                    </View>
                                </TouchableOpacity>
                            </>
                        )
                    }
                    {
                        orderDetailByItem.payStatus == 2 && (
                            <View style={styles.cancelBecame}>
                                <Text>取消原因：不想去了</Text>
                            </View>
                        )
                    }

                    {
                        orderDetailByItem.payStatus == 3 && (
                            <View style={styles.refundContainer}>
                                <View style={styles.refundDetail}>
                                    {
                                        refundType == refundEnum.apply && (
                                            <Text style={styles.refundDetailText}>退款进度：申请中</Text>
                                        )
                                    }

                                    {
                                        refundType == refundEnum.success && (
                                            <Text style={styles.refundDetailText}>退款进度：退款成功</Text>
                                        )
                                    }

                                    {
                                        refundType == refundEnum.err && (
                                            <Text style={styles.refundDetailText}>退款进度：退款失败</Text>
                                        )
                                    }

                                </View>
                                <View style={styles.refundResult}>
                                    {
                                        refundType == refundEnum.apply && (
                                            <Text style={styles.result}>正在后台审核中</Text>
                                        )
                                    }
                                    {
                                        refundType == refundEnum.success && (
                                            <Text style={styles.result}>退回原支付途径</Text>
                                        )
                                    }
                                    {
                                        refundType == refundEnum.err && (
                                            <Text style={styles.result}>失败原因：退回原支付途径</Text>
                                        )
                                    }
                                    <Text style={styles.resultMoney}>¥88</Text>
                                </View>
                            </View>
                        )
                    }

                    <View style={styles.waitPayCardWarp}>
                        <View style={styles.waitPayCardDetail}>
                            <View style={styles.waitPayCardDetailBanner}>
                                <Image source={orderDetailByItem.imgUrls} style={{ width: "100%", height: "100%" }} />
                            </View>
                            <View style={styles.waitPayCardDetailContent}>
                                <View>
                                    <Text
                                        numberOfLines={1}
                                        style={styles.waitPayCardDetailTitle}
                                    >{ orderDetailByItem?.productName }</Text>
                                </View>
                                <View style={styles.waitPayNumber}>
                                    <Text style={styles.waitPayNumberText}>x1</Text>
                                </View>
                                <View style={styles.waitPayMoney}>
                                    <Text style={styles.waitPayMoneyText}>¥{ orderDetailByItem?.price }</Text>
                                </View>
                            </View>
                        </View>
                        <View style={styles.allPrice}>
                           <View style={styles.allPriceItem}>
                               <Text style={styles.allPriceText}>总价</Text>
                               <Text style={styles.allPriceText}>¥{ orderDetailByItem?.price }</Text>
                           </View>
                            {
                                (orderDetailByItem.payStatus == 1 || orderDetailByItem.payStatus == 3) && (
                                    <View style={[styles.allPriceItem, styles.allPriceItem_paid]}>
                                        <Text style={styles.allPriceText}>实付款</Text>
                                        <Text style={[styles.allPriceText, styles.colorRed]}>¥{ orderDetailByItem?.price  }</Text>
                                    </View>
                                )
                            }
                        </View>

                        <View style={styles.activityTypeWarp}>
                            <Text style={styles.allPriceText}>门票类型</Text>
                            <Text style={styles.allPriceText}>{ orderDetailByItem.ticketName }</Text>
                        </View>
                        <View style={styles.activityTypeWarp}>
                            <Text style={styles.allPriceText}>订单编号</Text>
                            <View style={{ flexDirection: "row", alignItems: "center" }}>
                                <Text style={[styles.allPriceText]}>{ orderDetailByItem.orderId }</Text>
                                <TouchableOpacity onPress={copyToClipboard}>
                                    <View style={{ width: 14, height: 14, marginLeft: 6}}>
                                        <Image source={CopyIcon} style={{ width: "100%", height: "100%" }} />
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style={styles.activityTypeWarp}>
                            <Text style={styles.allPriceText}>创建时间</Text>
                            <Text style={styles.allPriceText}>{ orderDetailByItem?.placeTime }</Text>
                        </View>
                        {
                            (orderDetailByItem.payStatus == 1 || orderDetailByItem.payStatus == 3) && (
                                <View style={styles.activityTypeWarp}>
                                    <Text style={styles.allPriceText}>付款时间</Text>
                                    <Text style={styles.allPriceText}>{ orderDetailByItem?.payTime }</Text>
                                </View>
                            )
                        }
                        {
                            orderDetailByItem.payStatus == 0 && (
                                <View style={styles.activityTypeWarp}>
                                    <Text style={styles.allPriceText}>支付方式</Text>
                                    <Text style={styles.allPriceText}>
                                        在线支付
                                    </Text>
                                </View>
                            )
                        }

                        {
                            (orderDetailByItem.payStatus == 1 || orderDetailByItem.payStatus == 3) && (
                                <View style={styles.activityTypeWarp}>
                                    <Text style={styles.allPriceText}>支付方式</Text>
                                    <Text style={styles.allPriceText}>
                                        微信支付
                                    </Text>
                                </View>
                            )
                        }
                    </View>
                </View>
            </ScrollView>
            <View style={styles.botBtnWarp}>
                {
                    orderDetailByItem.payStatus == 0 && (
                        <>
                            <TouchableOpacity onPress={() => cancelOrderByNum('12345')}>
                                <View style={styles.cancelOrder}>
                                    <Text style={styles.cancelOrderText}>
                                        取消订单
                                    </Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity>
                                <View style={styles.goPayWarp}>
                                    <Text style={styles.goPayWarpText}>
                                        去支付
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </>
                    )
                }

                {
                    orderDetailByItem.payStatus == 1 && (
                        <>
                            <TouchableOpacity onPress={goRefundOrder}>
                                <View style={styles.cancelOrder}>
                                    <Text style={styles.cancelOrderText}>
                                        申请退款
                                    </Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity>
                                <View style={styles.goPayWarp}>
                                    <Text style={styles.goPayWarpText}>
                                        展示凭证
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </>
                    )
                }

                {
                    orderDetailByItem.payStatus == 2 && (
                        <>
                            <TouchableOpacity>
                                <View style={styles.cancelOrder}>
                                    <Text style={styles.cancelOrderText}>
                                        再次购买
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </>
                    )
                }

                {
                    orderDetailByItem.payStatus == 3 && (
                        <>
                            <TouchableOpacity>
                                <View style={styles.cancelOrder}>
                                    <Text style={styles.cancelOrderText}>
                                        再次购买
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </>
                    )
                }

                {
                    orderDetailByItem.payStatus == 4 && (
                        <>
                            <TouchableOpacity>
                                <View style={styles.cancelOrder}>
                                    <Text style={styles.cancelOrderText}>
                                        再次购买
                                    </Text>
                                </View>
                            </TouchableOpacity>
                        </>
                    )
                }
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    waitPayHeader: {
        flexDirection: "row",
        alignItems: "center",
    },
    waitPayHeaderIcon: {
        width: scaleSize(16),
        height: scaleSize(16),
    },
    waitPaytitle: {
        fontSize: 18,
        color: "#ED2A20",
        marginLeft: 4,
        fontWeight: "bold"
    },
    waitPayTime: {
        marginTop: 5,
        flexDirection: "row",
        justifyContent: "center",
    },
    waitPayTimeText: {
        color: "#2A2B30",
        fontSize: 14,
    },
    paidTitle: {
        fontSize: 18,
        color: "#2A2B30",
        marginLeft: 4,
        fontWeight: "bold"
    },
    goPay: {
        width: scaleSize(72),
        height: scaleSize(24),
        borderRadius: 12,
        backgroundColor: "#ED2A20",
        margin: "auto",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        marginTop: 12,
        marginBottom: 12,
    },
    goPayText: {
        fontSize: 12,
        color: "#FFF",
    },
    waitPayCardWarp: {
        backgroundColor: "#fff",
        marginLeft: 12,
        width: scaleSize(351),
        // margin: 12,
        // padding: 12,
        paddingRight: 12,
        paddingTop: 12,
        paddingLeft: 12,
        borderRadius: 8,
    },
    waitPayCardDetail: {
        flexDirection: "row",
    },
    waitPayCardDetailBanner: {
        width: scaleSize(74),
        height: scaleSize(74),
        // backgroundColor: "blue",
        borderRadius: 4,
    },
    waitPayCardDetailContent: {
        marginLeft: 10,
    },
    waitPayCardDetailTitle: {
        fontSize: 14,
        color: "#2A2B30",
        fontWeight: "bold",
        width: scaleSize(220)
    },
    waitPayNumber: {
        marginTop: 6,
    },
    waitPayNumberText: {
        fontSize: 12,
        color: "#9C9EAC"
    },
    waitPayMoney: {
        marginTop: 25,
    },
    waitPayMoneyText: {
        fontSize: 14,
        color: "#ED2A20",
        fontWeight: "bold",
    },
    allPrice: {

        marginTop: 22,
        paddingBottom: 20,
        borderBottomColor: "#E4E6EC",
        borderBottomWidth: 0.5  ,
        marginBottom: 20,
    },
    allPriceItem: {
        flexDirection: "row",
        justifyContent: "space-between",
    },
    allPriceItem_paid: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginTop: 22,
    },
    allPriceText: {
        color: "#2A2B30",
        fontSize: 14,
    },
    colorRed: {
        color: "red",
    },
    activityTypeWarp: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginBottom: 22
    },
    botBtnWarp: {
        position: "absolute",
        bottom: 0,
        width: "100%",
        backgroundColor: "#FFF",
        height: 77,
        flexDirection: "row",
        justifyContent: "flex-end",
        paddingTop: 8,
        paddingRight: 16,
    },
    cancelOrder: {
        width: 80,
        height: 32,
        borderRadius: 20,
        borderWidth: 1,
        borderStyle: "solid",
        borderColor: "#2A2B30",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        marginRight: 12,
    },
    cancelOrderText: {
        color: "#2A2B30",
        fontSize: 12,
    },
    goPayWarp: {
        width: 80,
        height: 32,
        borderRadius: 20,
        backgroundColor: "#EC6138",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",

    },
    goPayWarpText: {
        color: "#fff",
        fontSize: 12,
    },
    cancelBecame: {
        flexDirection: "row",
        justifyContent: "center",
        marginTop: 6,
        marginBottom: 14,
    },
    cancelBecame_text: {
        color: "#2A2B30",
        fontSize: 14,
    },
    refundContainer: {
        width: scaleSize(351),
        marginLeft: 12,
        marginRight: 12,
        backgroundColor: "#fff",
        paddingTop: 15,
        paddingBottom: 14,
        paddingLeft: 12,
        paddingRight: 12,
        marginBottom: 12,
    },
    refundDetail: {
        marginBottom: 10,
    },
    refundDetailText: {
        fontSize: 14,
        color: "#2A2B30",
        fontWeight: "bold",
    },
    refundResult: {
        flexDirection: "row",
        justifyContent: "space-between"
    },
    result: {
        fontSize: 12,
        color: "#9C9EAC",
    },
    resultMoney: {
        fontSize: 14,
        color: "#EC6138"
    },
});
